﻿<!DOCTYPE HTML>
<html>

<head>
   <title>1. 实现伸缩二级菜单 </title>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="css/menu.css" />
</head>

<body>
   <h3>通过css选取元素</h3>
   <div>xxx.querySelector(css);</div>
   <div>xxx.querySelectorAll(css);</div>
   <ul class="tree">
      <li>
         <span class="open">考勤管理</span>
         <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班/出差</li>
         </ul>
      </li>
      <li>
         <span>信息中心</span>
         <ul>
            <li>通知公告</li>
            <li>公司新闻</li>
            <li>规章制度</li>
         </ul>
      </li>
      <li>
         <span>协同办公</span>
         <ul>
            <li>公文流转</li>
            <li>文件中心</li>
            <li>内部邮件</li>
            <li>即时通信</li>
            <li>短信提醒</li>
         </ul>
      </li>
   </ul>
   <script>
      //DOM 4步:
      //1. 查找触发事件的元素
      //2. 绑定事件处理函数
      //3. 查找要修改的元素
      //4. 修改元素
      var spans = document.querySelectorAll(
         "ul.tree>li>span");
      // console.log(spans);
      for (const span of spans) {
         span.onclick = function () {
            //this--->当前span元素
            var _this = this;
            if (this.className !== "open") {
               // for (const span2 of spans) {
               //    span2.className = ""
               // }
               var openSpan = document.querySelector(
                  "ul.tree>li>span.open");
               //如果querySelector找不到 返回null
               if (openSpan) {
                  openSpan.className = "";
               }

               this.className = "open"
            } else {
               this.className = ""
            }

         }
      }
   </script>
</body>

</html>